<template>
  <div class='input'>
    <input type="text" @keydown.enter="handleAdd" v-model.trim="inputValue">
  </div>
</template>

<script>
export default {
  name: 'TodoInput',
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleAdd () {
      if (this.inputValue.length === 0) {
        return
      }
      // 向待办事项数组中添加当前的新待办事项
      // 调用 vuex 的 store 中的 mutation 方法
      // 来实现添加，但 mutation 方法不能直接调用
      // 到，而是需要使用 store.commit() 来提交
      // store.commit(mutationType, payload)
      this.$store.commit('addTodoItem', { title: this.inputValue })

      // 清空输入框
      this.inputValue = ''
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
